-------------------------------------------IE

Vue.js 不支持 IE8 及其以下 IE 版本。


-------------------------------------------cdn

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.7.14/vue.min.js

unpkg：https://unpkg.com/vue@2.7.14/dist/vue.min.js

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js

bootcdn :https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js

-------------------------------------------MVVM设计模式

- M: Model(模型): 需要展示的数据
- V: View(视图层): 呈现给用户的界面
- VM: ViemModel(视图模型层):数据与视图的双向绑定


-------------------------------------------Vue

<div id="app">
	{{ message }}
	{{ run()}}
</div>



var vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	},
	methods:{
		run:function(){
			console.log('这是一个方法');
			return " the car is runing";
		}
	}
});


参数el，是element的缩写，用于提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

参数值有两种类型，包括string | HTMLElement

上例中， el : "#app"表示挂载目标为id为"app"的元素，也可以写为 el : document.getElementById('app')


参数data表示Vue实例的数据对象

data 用于定义属性

上例中，data: {  message: 'Hello Vue!' } 表示变量message所代表的真实值为"Hello Vue!"


参数methods 用于定义的函数，可以通过 return 来返回函数值。


vm.message === data.message // true

vm.$data === data // true

vm.$el === document.getElementById('app') // true                                                                                                                                                                                                                                                             


-------------------------------------------插值表达式

{{ }} 用于输出对象属性和函数返回值。


{{ message }}



-------------------------------------------data

data  用于定义属性

<div id="app">
	{{ site }}
</div>

var vm = new Vue({
        el: '#app',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        }
})

-------------------------------------------methods

methods 用于定义的函数，可以通过 return 来返回函数值。

<div id="app">
	{{ details() }}
</div>

var vm = new Vue({
        el: '#app',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
})





-------------------------------------------响应式原理

var temp = null;

Object.defineProperty(obj, 'msg', {
	// 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
	set: function (newVal, oldVal) {
		debugger
		console.log(newVal);
		temp = newVal;
	},
	// 读取 obj.msg 时get方法会被系统调用
	get: function () {
		debugger
		return temp;
	}
})





-------------------------------------------指令


指令是带有 v- 前缀的特殊属性。它们用于HTML元素，

指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。


v-if指令

v-show指令

v-else指令

v-for指令

v-bind指令

v-on指令

v-model指令

-------------------------------------------v-bind 缩写

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>




-------------------------------------------<template>标签

类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。


<div id="app">

    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
	<ul>
		<template v-for="item in items">
		<li>{{ item.msg }}</li>
		<li class="divider" role="presentation"></li>
		</template>
	</ul>
</div>



//构造器
var vm = new Vue({
	el: '#app',
	data: {
		ok:true,
		items:[{ msg: 'James' }, { msg: 'Emma' }, { msg: 'David' }, { msg: 'Michael'}]
	}
});



-------------------------------------------v-text

v-text会把文本中的html标签输出而不解析

可以输出非 HTML 标签数据，无法转义 HTML 标签；

v-text文本指令实现的效果跟 {{}} 实现的效果是一样的

标签内原先的内容将被覆盖


<div id="app">
	{{msg}} {{info}}
	<p v-text="msg">test
	</p>
	<p v-text="info">test
	</p>
	<p v-text="info+'mas'">test
	</p>
</div>



//构造器
var vm = new Vue({
	el: '#app',
	data: {
		msg: "这里是v-text指令",
		info: "<h2>高时银博客</h2>"
	}

});




//渲染后

<div id="app">
        这里是v-text指令 &lt;h2&gt;高时银博客&lt;/h2&gt;
        <p>这里是v-text指令</p> <p>&lt;h2&gt;高时银博客&lt;/h2&gt;mas</p>
</div>


-------------------------------------------v-html

v-html可以解析html标签。

可以输出非 HTML 标签数据，可以转义 HTML 标签；

标签内原先的内容将被覆盖


<div id="app">
	{{msg}} {{info}}
	<p v-html="msg">test
	</p>
	<p v-html="info">test
	</p>
	<p v-html="info+'mas'">test
	</p>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		msg: "这里是v-text指令",
		info: "<h2>高时银博客</h2>"
	}

});



//渲染后

<div id="app">
        这里是v-text指令 &lt;h2&gt;高时银博客&lt;/h2&gt;
        <p>这里是v-text指令</p> <p><h2>高时银博客</h2>mas</p>
</div>

-------------------------------------------v-model


v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。


text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。



<div id="app">
	<p>
		模板插值: {{ message }}</p>
	<p>
		双向绑定:<input type="type" v-model="message" name="msg" value="" /></p>
		
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">{{ checked }}</label>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!',
		checked:false
	}
});




-------------------------------------------v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真(truthy) 值的时候被渲染。


条件判断使用 v-if 指令：

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。


把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-if可以使用data对象，也可以直接使用表达式


<div id="app">

    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
	
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		seen:true,
		ok:true
	}
});




-------------------------------------------v-else


可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。


在vue 1.0 v-else 可以在 v-show后面， 2.0 后不起作用


随机生成一个数字，判断是否大于0.5，然后输出对应信息：


<div id="app">
	<p v-if="Math.random() > 0.5">
		yes
	</p>
	<p v-else>
		no
	</p>
	<p v-if="ok">
		yes
	</p>
	<p v-else>
		no
	</p>
</div>




//构造器
var vm = new Vue({
	el: '#app',
	data: {
		ok:false
	}
});





-------------------------------------------v-else-if


顾名思义，充当 v-if 的“else-if 块”，可以连续使用：



<div id="app">
	<p v-if="type === 'A'">
		A
	</p>
	<p v-else-if="type === 'B'">
		B
	</p>
	<p v-else-if="type === 'C'">
		C
	</p>
	<p v-else>
		Not A/B/C
	</p>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		type:'D'
	}
});


-------------------------------------------v-show


v-show指令也是条件渲染指令，刚刚也提到了v-if指令和v-show指令有一个区别，

这个区别就是v-show指令的元素都会被渲染，只是表达式为假的元素会被设置css属性display:none，将其隐藏。


v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染


当我们需要频繁控制元素的显示与否时，推荐使用 v-show 指令，避免因为使用 v-if 指令而造成的高性能消耗。


v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

vue1.0 v-show不支持template   vue2.0 v-show 支持 template


<div id="app">
	<h1 v-show="ok">Hello!</h1>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		ok:false
	}
});


//渲染后

<div id="app"><h1 style="display: none;">Hello!</h1></div>


-------------------------------------------v-for


循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。


<div id="app">
		<h1>迭代数组</h1>
        <ul>
            <li v-for="tab in tabs">{{tab}} </li>
        </ul>
		<h1>迭代数组 (带索引)</h1>
        <ul>
            <li v-for="(tab,index) in tabs">{{index}} . {{tab}} </li>
        </ul>
		<h1>迭代数组对象</h1>
        <dl>
            <dt v-for="tab in tabx">{{tab.name}} </dt>
        </dl>
		
		<h1>迭代单个对象</h1>
		<ul>
			<li v-for="value in object">
			{{ value }}
			</li>
		</ul>
		
		<h1>迭代单个对象 (键值对)</h1>
		<ul>
			<li v-for="(value,key) in object">
			{{key}} : {{ value }}
			</li>
		</ul>
		
		<h1>迭代单个对象 (键值对，索引)</h1>
		<ul>
			<li v-for="(value,key,index) in object">
			{{index}}.{{key}} : {{ value }}
			</li>
		</ul>
		
		
		<h1>迭代整数  n是从1 开始的</h1>
		<ul>
			<li v-for="n in 10">
			{{ n }}
			</li>
		</ul>

</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		tabs: ['James', 'Emma', 'Jack', 'David', 'Michael'],//数组
		tabx: [{ name: 'James' }, { name: 'Emma' }, { name: 'David' }, { name: 'Michael'}],//数组对象
		object: {
				  name: '菜鸟教程',
				  url: 'http://www.runoob.com',
				  slogan: '学的不仅是技术，更是梦想！'
				} //对象
	}
});





-------------------------------------------v-bind


v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定

它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。简单说，v-bind是用来绑定HTML属性。

Vue官方提供了一个简写方式 :bind

v-bind对象语法，我们需要队css-class类名赋一个boolean值，来决定css类是否生效
<h2 v-bind:class="{css类名1: true|false, css类名2: true|false}">{{message}}</h2>



<div id="app">
	<!-- 绑定一个属性 -->
	<img v-bind:src="imgUrl" /><br />
	<!-- 缩写 -->
	<img :src="imgUrl" /><br />
	<!-- 内联字符串拼接 -->
	<img :src="'/path/to/images/' + fileName"><br />
	<!-- class 绑定 -->
	<div v-bind:class="{ red: isRed}">
	</div>
	<h1>
		数组语法</h1>
	<div v-bind:class="[classA, classB]">
	</div>
	<div v-bind:class="[classA, {classB: isB, classC: isC}]">
	</div>
	<!-- style绑定 -->
	<div v-bind:style="{fontSize: size + 'px'}">
	</div>
	<h1>
		对象语法 直接绑定到一个样式对象</h1>
	<div v-bind:style="[styleObjectA, styleObjectB]">
	</div>
</div>



//构造器
var vm = new Vue({
	el: '#app',
	data: {
		isRed: true,
		imgUrl: '//www.w3cplus.com/sites/default/files/blogs/2017/1709/meinv-1.jpg',
		fileName:'meinv-1.jpg',
		classA: 'classA',
		classB: 'classB',
		isB: true,
		isC: true,
		size: 12,
		styleObjectA: {
			color: 'red'
		},
		styleObjectB: { fontSize: '13px' }
	}
});





-------------------------------------------v-on指令


可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

Vue官方提供了一个简写方式 @click

注意在 Vue 的实例中 this 的指向就是上下文，就 Vue 实例本身



-----------------------内联语句

<button v-on:click="counter += 1">增加 1</button>

<button v-on:click="say('what')">Say what</button>
 
#访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
<button v-on:click="say('what',$event)">Say what</button>

#无须传参 可以使用 window.event
<button v-on:click="say2()">Say what</button>

say: function (message,e) {
  if(e){
	e.preventDefault();
  }
  
  this.message = message;
},
say2:function(){
	window.event.preventDefault();
}


<div id="app">
	<button v-on:click="counter += 1">
		增加 1</button>
	<p>
		这个按钮被点击了 {{ counter }} 次。</p>
	<h1>
		`greet` 是在下面定义的方法名
	</h1>
	<p>
		<button v-on:click="greet">
			Greet</button></p>
	<p>
		<button v-on:click="say('hi')">
			Say hi</button></p>
	<h1>
		在2.4.0+版本已经开始提供可以传入对象的写法</h1>
	<p>
		<button v-on:mouseover ="onOver" @mouseout ="onOut">对象形式</button>
		<button v-on="{mouseover:onOver,mouseout:onOut}">
			绑定多个事件</button>
	</p>
</div>


//构造器
var vm = new Vue({
	el: '#app',
	data: {
		counter: 0,
		name: 'Vue.js'
	},
	// 在 `methods` 对象中定义方法
	methods: {
		greet: function (event) {
			// `this` 在方法里指向当前 Vue 实例
			alert('Hello ' + this.name + '!')
			// `event` 是原生 DOM 事件
			if (event) {
				alert(event.target.tagName)
			}
		},
		say: function (message) {
			alert(message)
		},
		onOver: function () {
			console.log("鼠标移入");
		},
		onOut: function () {
			console.log("鼠标移出");
		}
	}
});




-------------------------------------------v-cloak


解决页面加载时闪烁出现vue标签或者指令的问题

在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到官网中提到的v-cloak来解决。

这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

这样就解决了刷新的瞬间页面出现大量乱码的情况。


//html

<div id="app" v-cloak>
    {{context}}
</div>



//css  属性选择器   不支持IE6

[v-cloak]{
    display: none;
}


当页面没有显示内容时，此时 div 标签添加了一个 v-cloak 属性，同时，从右侧的样式中可以看到，隐藏显示，当加载完成后， 

div 标签上去除了该属性，同时插值表达式也编译完成，正确显示出来。


v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中









-------------------------------------------表单


------------------------文本框

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

 <input v-model="message" placeholder="编辑我……">

<textarea v-model="message2" placeholder="多行文本输入……"></textarea>


data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
}



------------------------多选框

<input type="checkbox" id="checkbox" v-model="checked">

<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">

data: {
    checked : false,
    checkedNames: []
}


------------------------单选框


<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">

data: {
	picked : 'Runoob'
}

------------------------select 列表

<select v-model="selected" name="fruit">
	<option value="">选择一个网站</option>
	<option value="www.runoob.com">Runoob</option>
	<option value="www.google.com">Google</option>
</select>


data: {
    selected: '' 
}


------------------------修饰符

自动过滤用户输入的首尾空格
<input v-model.trim="msg">

将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
<input v-model.number="age" type="number">

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >




------------------------综合


<div id="form">
  <label for="username">昵称：</label>
  <input type="text" id="username" v-model.trim="username">
  <br>
  <label for="age">年龄：</label>
  <input type="number" id="age" v-model.number="age">
  <br>
  <label for="checkbox">单身：</label>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <br>
  <label>喜欢：</label>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <br>
<input type="submit" v-on:click="submit"/>
  <br/>
  <br/>
  <span>昵称: {{ username }}</span>
  <br>
  <span>年龄: {{ age }}</span>
  <br>
  <span>单身: {{ checked }}</span>
  <br>
  <span>喜欢: {{ checkedNames }}</span>
</div>


<input type="submit" v-on:click="submit"/>

data: {
	  //初始值
	  username:'username  ',
	  age:18,
	  checked : false,
      checkedNames: ['Runoob']
}

methods:{
		//提交表单
		submit:function(){
			var params=new Object();
			params.username=this.username;
			params.age=this.age;
			params.checked=this.checked;
			params.checkedNames=this.checkedNames;
			alert("formdata："+JSON.stringify(params));
		}
}

-------------------------------------------事件修饰符


.stop            阻止事件冒泡  ( 事件流默认 从内到外)
.prevent		 阻止事件的默认行为
.capture		 使用事件捕获模式  (从父到子 触发事件  body到 div 冒泡模式是从子到父 触发事件  div到body)
.self			 只在当前元素本身触发 （比如子元素 触发无效）
.once			 点击事件将只会触发一次	


------------------------阻止冒泡


<div v-on:click="fn1" style="width:100px;height:100px;background:#ddd;">
	<button @click="fn2">普通按钮</button>
	<button @click.stop="fn2">阻止冒泡</button>
</div>


fn1: function (xx) {
	console.log('parent');
},
fn2: function () {
	console.log('child');
}

普通按钮 输出  fn2  fn1
阻止冒泡 输出  fn2


------------------------取消默认事件

<div id="example">
  <a href="http://cnblogs.com" target="_blank">普通链接</a>
  <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
</div>




------------------------事件捕获模式


<div v-on:click.capture="fn1" style="width:100px;height:100px;background:#ddd;">
	<button @click="fn2">事件捕获</button>
</div>


输出  fn1  fn2



------------------------当前元素本身触发


<div v-on:click.capture="fn1">
  <button @click="fn2">self</button>
</div>


点击 self 输出 fn2, fn1不会触发


------------------------只触发一次

<div>
  <button @click="fn2">普通按钮</button>
  <button @click.once="fn2">触发一次</button>
</div>




-------------------------------------------鼠标修饰符

.left 左键
.right 右键
.middle 滚轮


<div id="example">
	<button v-on:mouseup.right="right" v-on:mouseup.middle="middle" v-on:mouseup.left="left">
		{{message}}</button>
</div>


data:{
	message:'分别用左、中、右键进行点击，会出现不同的效果'
},
methods:{
	left(){
	  this.message = 'left'
	},
	right(){
	  this.message = 'right'
	},
	middle(){
	  this.message = 'middle'
	}        
}


-------------------------------------------按键修饰符



<div id="example">
	<button v-on:keyup.enter="enter"
	v-on:keyup.a="a"
	v-on:keyup.b="b"
	v-on:keyup.c="c" 	
	v-on:keyup.tab="tab" 
	v-on:keyup.delete="delete1" 
	v-on:keyup.esc="esc" 
	v-on:keyup.space="space" 
	v-on:keyup.up="up" 
	v-on:keyup.down="down" 
	v-on:keyup.left="left" 
	v-on:keyup.right="right">{{message}}</button>
</div>

data:{
    message:'将光标置于按钮上后，按下键盘上不同的按键，会有不同的效果'
},
methods:{
    a(){
      this.message = 'a'
    },
    b(){
      this.message = 'b'
    },
    c(){
      this.message = 'c'
    },
    enter(){
      this.message = 'enter'
    },
    tab(){
      this.message = 'tab'
    },
    delete1(){
      this.message = 'delete'
    }, 
    esc(){
      this.message = 'esc'
    },
    space(){
      this.message = 'space'
    },
    up(){
      this.message = 'up'
    },
    down(){
      this.message = 'down'
    },
    left(){
      this.message = 'left'
    },
    right(){
      this.message = 'right'
    }
}

-------------------------------------------系统修饰键

在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 


.ctrl
.alt
.shift
.meta


<div>
	<button v-on:click.ctrl="ctrl" v-on:click.alt="alt" v-on:click.shift="shift" v-on:click.meta="meta">
		{{message}}</button>
</div>


ctrl(){
  this.message = 'ctrl'
},
alt(){
  this.message = 'alt'
},
shift(){
  this.message = 'shift'
},  
meta(){
  this.message = 'meta'
}










-------------------------------------------自定义指令






------------------------全局


<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>



// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})


// 创建根实例
new Vue({
  el: '#app'
})





------------------------私有（局部）

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>



// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})



-------------------------------------------改变数组的元素


var arr=['a','b','c'];


------------------------LIFO 后进先出 (栈)

push 入栈   pop 出栈

arr.push('d');
arr.push('e');
arr.push('f');
arr.pop(); //f
arr.pop(); //e
arr.pop(); //e


------------------------FIFO 先进先出 (队列)


//队首 在 最左
arr=[];

arr.push('a');
arr.push('b');
arr.push('c');
arr.shift(); //a
arr.shift(); //b
arr.shift(); //c


//队首 在 最右

arr.unshift('a');
arr.unshift('b');
arr.unshift('c');
arr.pop(); //a
arr.pop(); //b
arr.pop(); //c



------------------------向数组的末尾添加一个或多个元素，并返回新的长度

push()

arr.push('d','e','f');



------------------------删除数组最后一个元素，并返回当前元素

pop()

arr.pop();




------------------------删除数组第一个元素，并返回当前元素

shift()

arr.shift();



------------------------向数组的开头添加一个或多个元素，并返回当前元素

unshift()

arr.unshift('a','b','c');



------------------------添加或删除元素

splice()

arr.splice(0,0,'a','b','c');  // 相当于 arr.shift('a','b','c');

arr.splice(arr.length,0,'a','b','c'); //



sort()
reverse()